<template>
    <Modal v-model="insideModal" width="800" title="轮播图编辑" @on-visible-change="resetForm">
        <div v-loading="contentLoading">
            <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm width_100"
                     label-position="left">
                <el-form-item label="课程标题:" prop="title">
                    <el-input
                            v-model="formData.title"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="封面:" prop="transCoverId">
                    <SinglePhotoUploader
                            class="pic_width"
                            v-model="formData.transCoverId"
                            :img-url="formData.coverUrl"
                            :upload-url="'/class_api/admin/upload'"
                    >

                    </SinglePhotoUploader>
                </el-form-item>
                <el-form-item label="课程难度:" prop="rate">
                    <el-rate v-model="formData.rate"></el-rate>
                </el-form-item>
                <el-form-item label="教练名称:" prop="transCoachId">
                    <CoachSelect
                            v-model="formData.transCoachId"
                    >

                    </CoachSelect>
                </el-form-item>
                <el-form-item label="课程时间(分钟单位):" prop="times">
                    <el-input
                            clearable
                            type="number"
                            v-model="formData.times"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="开课时间:" prop="startTimes">
                    <el-date-picker
                            v-model="formData.startTimes"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="课程价格:" prop="price">
                    <el-input
                            clearable
                            type="number"
                            v-model="formData.price"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="课程容量:" prop="peoples">
                    <el-input
                            clearable
                            type="number"
                            v-model="formData.peoples"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="课程介绍:" >
                    <RichTextEditor
                            :content="formData.content"
                            ref="RichTextEditor"
                    >

                    </RichTextEditor>
                </el-form-item>

            </el-form>
        </div>
        <div slot="footer">
            <Button type="primary" size="large" @click="insideModal=false">取消</Button>
            <Button type="success" size="large" @click="handleSave">保存</Button>
        </div>
    </Modal>
</template>

<script>

    import SinglePhotoUploader from "./SinglePhotoUploader";
    import CoachSelect from "@/views/CoachSelect";
    import RichTextEditor from "@/views/RichTextEditor";

    export default {
        name: "ClassEditor",
        components: {RichTextEditor, CoachSelect, SinglePhotoUploader},
        mounted: function () {
        },
        data() {
            return {
                formData: {
                    startTimes:[]
                },
                insideModal: false,
                contentLoading: false,
                rules: {
                    title: [
                        {required: true, message: '请输入标题', trigger: 'blur'},
                    ],
                    transCoverId: [
                        {required: true, message: '请上传封面', trigger: 'blur'},
                    ],
                    rate: [
                        {required: true, message: '请选择课程难度', trigger: 'blur'},
                    ],
                    transCoachId: [
                        {required: true, message: '请选择教练', trigger: 'blur'},
                    ],
                    times: [
                        {required: true, message: '请输入课程时间', trigger: 'blur'},
                    ],
                    price: [
                        {required: true, message: '请输入课程价格', trigger: 'blur'},
                    ],
                    peoples: [
                        {required: true, message: '请输入课程容量', trigger: 'blur'},
                    ],
                    startTimes: [
                        { type: 'array', required: true, message: '请选择开课时间', trigger: 'change' }
                    ],
                }
            }
        },
        methods: {
            resetForm: function () {
                this.$refs.ruleForm.resetFields();
            },
            show: function (data) {
                console.log('轮播图编辑传入参数:', data);
                this.formData = this.simpleClone(data);
                this.formData.transCoachId = this.formData.coachId;
                console.log('轮播图编辑传入参数结果:', this.formData);
                this.$refs.RichTextEditor.setValue(this.formData.content);
                this.insideModal = true;
            },
            handleSave: function () {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        // 检查参数
                        var content = this.$refs.RichTextEditor.getValue();
                        if (!content) {
                            this.showError('请输入内容');
                            return;
                        }
                        // 时间转换
                        this.formData.transStartTime = this.formData.startTimes[0];
                        this.formData.transEndTime = this.formData.startTimes[1];
                        // 保存数据
                        this.formData.content = content;
                        const that = this;
                        this.contentLoading = true;
                        this.requestPut('/class_api/class', this.formData, function (res) {
                            that.handleInfo(res, '保存数据成功!');
                            that.contentLoading = false;
                            that.insideModal = false;
                            that.$emit('refresh');
                            that.formData = {};
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });

            }
        }
    }
</script>

<style scoped>

</style>
